<script setup lang="ts">
import {defineProps, reactive, ref, watch} from 'vue';

const emit = defineEmits(['on-data']);
const props = defineProps({
  question: {
    type: Object,
    required: true
  }
});


const answer = ref('');
answer.value = props.question.answer;
const data = reactive({
  answer: answer,
  ...props.question,
});

// 侦听 count 的变化
watch(answer, () => {
  emit('on-data', data);
});

</script>

<template>
  <!--主观题组件-->
  <div class="question-container">
    <el-row align="middle">
      <el-col :span="23">
        <p class="question-content">{{ question.content }}</p>
      </el-col>
      <el-col :span="1" >
        <el-tag size="large" v-if="question.score" type="success">{{ question.score }}分</el-tag>
      </el-col>
    </el-row>

    <el-input
        v-model="answer"
        style="width: 100%"
        :autosize="{ minRows: 4}"
        type="textarea"
        placeholder="请输入..."
    />
  </div>
  <br/>
</template>

<style scoped>
.question-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.question-content {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #303133;
}

.radio-group {
  display: flex;
  align-content: flex-start;
  gap: 12px;
  flex-direction: column;
}
</style>